---
title: Ripple
date: 2023-11-18
description: An animated ripple effect typically used behind elements to emphasize them.
author: dillionverma
published: true
video: https://cdn.magicui.design/ripple.mp4
---

<ComponentPreview name="ripple-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/ripple
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="ripple" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

```css title="app/globals.css" showLineNumbers {2-3, 5-13}
@theme inline {
  --animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s)
    infinite;

  @keyframes ripple {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      transform: translate(-50%, -50%) scale(0.9);
    }
  }
}
```

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { Ripple } from "@/components/ui/ripple"
```

```tsx showLineNumbers
<div className="relative h-[500px] w-full overflow-hidden">
  <Ripple />
</div>
```

## Props

| Prop                | Type     | Default | Description                            |
| ------------------- | -------- | ------- | -------------------------------------- |
| `mainCircleSize`    | `number` | `210`   | The size of the main circle in pixels  |
| `mainCircleOpacity` | `number` | `0.24`  | The opacity of the main circle         |
| `numCircles`        | `number` | `8`     | The number of ripple circles to render |
